<template>
	<div class="g-list">
		<div class="g-item" v-for="(item,index) in gList" :key="index" @click="toItemDetail(item.id)">
			<img :src="item.imgs[0]">
			<div class="item-description">{{item.title}}{{item.description}}</div>
			<div class="item-price">¥{{item.price | dealPrice}}</div>
		</div>
	</div>
</template>
<script>
	import xzProductApi from "@/api/xzProduct"
	export default {
		name: 'home',
		props: ["categoryId"],
		data() {
			return {
				gList: []
			}
		},
		watch:{
			categoryId(newVal){
				this.getProductsList(newVal);
			}
		},
		filters:{
			dealPrice(val){
				let rightData = val/100
				return rightData
			}
		},
		methods: {
			getProductsList(id){
				xzProductApi.getXZList(id).then(res=>{
					console.log(res);
					this.gList = res.list;
				});
			},
			toItemDetail(id){
				this.$router.push({name:"productDetail",params: {id: id }})
			},
			initPage(){
				this.getProductsList(1);
			}
		},
		created(){
			this.initPage()
		}
	}
</script>
<style lang="less" scoped>
	.g-list {
		padding: 10px;
		margin-bottom: 50px;
		overflow: hidden;
		.g-item {
			float:left;
			background-color: #FFFFFF;
			margin-bottom:10px;
			text-align:left;
			width:163px;
			height:225px;
			img{
				width: 163px;
				height:163px;
				border-radius:5px;
			}
			.item-description{
				height:35px;
				overflow:hidden;
				margin-bottom: 5px;
			}
			.item-price{
				color:red;
			}
			
		}
		.g-item:nth-child(2n){
			margin-left:10px;
		}
	}
</style>
